<template>
  <div>
    <van-button
      class="follow-btn"
      type="info"
      :color="is_followed ? 'skyblue' : '#3296fa'"
      :round="isround"
      size="small"
      :loading="isloading"
      :icon="is_followed ? 'success' : 'plus'"
      @click="followed(aut_id)"
      >{{ is_followed ? '已关注' : '关注' }}</van-button
    >
  </div>
</template>
<script>
import { addfollowing, removefollowing } from '@/api/article'
export default {
  name: 'FollowUser',
  data() {
    return {
      isloading: false
    }
  },
  // model: {
  //   // 自定义v-model的数据名称
  //   prop: 'is_followed', // 组件上v-model的绑定名称:默认是value
  //   event: 'update' // 组件上v-model的绑定属性的监视事件:默认是input
  // },
  props: {
    is_followed: {
      type: Boolean,
      required: true
    },
    aut_id: {
      type: String,
      required: true
    },
    isround: {
      type: Boolean,
      default: true
    }
  },
  created() {
    console.log(this.is_followed)
    console.log(this.aut_id)
  },
  methods: {
    // 关注/取消关注
    async followed(id) {
      this.isloading = true
      try {
        if (this.is_followed) {
          // 取消关注
          await removefollowing(id)
        } else {
          // 关注
          await addfollowing(id)
        }
      } catch (error) {
        console.log(error)
      }
      this.isloading = false
      this.$emit('update:is_followed', !this.is_followed)
    }
  }
}
</script>

<style lang="less" scoped>
.follow-btn {
  width: 170px;
  height: 58px;
}
</style>
